import React from 'react'
import '../../assets/css/cart/cart.less'
import {Checkbox, Modal} from 'antd-mobile';
import 'antd-mobile/lib/checkbox/style/index.css'
import {withRouter} from 'react-router-dom'
import connect from "react-redux/es/connect/connect";
class CartComponents extends React.Component{
    constructor(){
        super()
        this.state={
            cart:[],
            allCheck:false,
            allSales:0,
            allPrice:0,
            btnState:false
        }
    }
    componentWillMount() {
        console.log(this.props.state.login);
        var tf = JSON.parse(this.props.state.login)
        if(localStorage['cart']&&tf){
            this.setState({
                cart:JSON.parse(localStorage['cart'])
            },()=>{
                this.init()
            })
        }
    }

    componentDidMount() {
        // console.log(JSON.parse(localStorage['cart']));
    }
    //选中
    checkGood(index){
        this.state.cart[index].check = !this.state.cart[index].check
        this.setState({
            cart: this.state.cart
        },()=>{
            localStorage.setItem('cart', JSON.stringify(this.state.cart))
        })
        this.init()
    }
    //数量减
    sub(index){
        if(this.state.cart[index].count===1){
            return
        }
        this.state.cart[index].count = this.state.cart[index].count-1
        this.setState({
            cart: this.state.cart
        },()=>{
            localStorage.setItem('cart', JSON.stringify(this.state.cart))
        })
        this.init()
    }
    //数量加
    add(index){
        this.state.cart[index].count = this.state.cart[index].count+1
        this.setState({
            cart: this.state.cart
        },()=>{
            localStorage.setItem('cart', JSON.stringify(this.state.cart))
        })
        this.init()
    }
    //删除
    del(index){
        Modal.alert('提示', '您确定要删除吗？', [
            {
                text: '取消',
                onPress: () =>{}
            },
            { text: '确定', onPress:() =>{
                
                    this.state.cart.splice(index,1)
                    this.setState({
                        cart: this.state.cart
                    },()=>{
                        localStorage.setItem('cart', JSON.stringify(this.state.cart))
                        this.init()
                    })
                }
            },
        ])
    }
    //全选点击事件
    allCheck(){
        if(this.state.allCheck){
            for (let i = 0; i <this.state.cart.length ; i++) {
                this.state.cart[i].check = false
            }
        }else{
            for (let i = 0; i <this.state.cart.length ; i++) {
                this.state.cart[i].check = true
            }
        }
        this.setState({
            allCheck:!this.state.allCheck,
            cart:this.state.cart
        },()=>{
            localStorage.setItem('cart', JSON.stringify(this.state.cart))
        })

        this.init()
    }
    //是否全选
    checked(){
        if(this.state.cart.length===0){
            this.setState({
                allCheck:false
            })
            return
        }
        for (var i = 0; i < this.state.cart.length ; i++) {
            if(this.state.cart[i].check){
            }else{
                this.setState({
                    allCheck:false
                })
                return
            }
        }
        this.setState({
            allCheck:true
        })
    }
    //结算按钮状态
    btnState(){
        for (var i = 0; i < this.state.cart.length ; i++) {
            if(this.state.cart[i].check){
                this.setState({
                    btnState:true
                })
                return
            }else{
            }
        }
        this.setState({
            btnState:false
        })

    }
    //初始化数据
    init(){
        this.imPrice()
        this.checked()
        this.btnState()
    }
    //计算价格
    imPrice(){
        this.state.allPrice = 0
        this.state.allSales = 0
        var arr = []
        for (var i = 0; i <this.state.cart.length ; i++) {
            if(this.state.cart[i].check){
                this.state.allPrice = this.state.allPrice + parseFloat(this.state.cart[i].data.price)*this.state.cart[i].count
                arr.push(this.state.cart[i])
            }
        }
        const res = new Map();
        arr= arr.filter((a) => !res.has(a.data.gid) && res.set(a.data.gid, 1))
        console.log(arr);
        for (var i = 0; i <arr.length ; i++){
            this.state.allSales = this.state.allSales + parseFloat(arr[i].data.freight)
            console.log(arr[i].data.freight);
        }
        this.setState({
            allPrice: this.state.allPrice,
            allSales:this.state.allSales
        })
    }
    //结算
    account(){
        //有商品被选中时
        if(!this.state.btnState){
            return
        }
        //跳转到确认订单页
        this.props.history.push('/cart/order')
        //筛选出购买的商品
        var cart =[]
        for (var i = 0; i <this.state.cart.length ; i++) {
            if(this.state.cart[i].check){
                cart.push(this.state.cart[i])
            }
        }
        this.setState({
            cart:this.state.cart,
        })
        localStorage.setItem('cart', JSON.stringify(this.state.cart))
        // this.init()
        var arr = {
          cart:cart,
          allFreight:this.state.allSales,
          allPrice:this.state.allPrice
        }
        localStorage.setItem('accountGoods', JSON.stringify(arr))
    }
    render() {
        const CheckboxItem = Checkbox.CheckboxItem;
        return(
            <div id='cart'>
                <div className='header'>购物车</div>
                <div className='goods'>
                    {this.state.cart.map((item,index)=>{
                        return(
                            <div key={index}>
                                <CheckboxItem onChange={this.checkGood.bind(this,index)} checked={item.check} >
                                </CheckboxItem>
                                <div className='good-info'>
                                    <div>
                                        <div className='img'><img src={item.data.images[0]} alt=""/></div>
                                        <div>
                                            <div>{item.data.title}</div>
                                            <div><div>{item.color.title}: {item.color.value}</div>  <div>{item.size.title}: {item.size.value}</div></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div onClick={this.del.bind(this,index)}>删除</div>
                                        <div>￥{item.data.price}</div>
                                        <div style={{display:'flex',justifyContent: 'space-between',alignItems:' center',border:'1px solid black',borderRadius: '5px'}}>
                                            <div onClick={this.sub.bind(this,index)} style={{padding:'5px 10px'}}>-</div>
                                            <div style={{padding:'0px 10px',borderLeft:'1px solid black',
                                                borderRight:'1px solid black'}}>{item.count}</div>
                                            <div onClick={this.add.bind(this,index)} style={{padding:'5px 10px'}}>+</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
                <div className='footer'>
                    <div onClick={this.allCheck.bind(this)}>
                        <CheckboxItem checked={this.state.allCheck} >
                        </CheckboxItem>
                        全选
                    </div>
                    <div>
                        <div>
                            <div>运费: </div>
                            <div>￥{this.state.allSales}</div>
                        </div>
                        <div>
                            <div>合计: </div>
                            <div>￥{this.state.allPrice.toFixed(2)}</div>
                        </div>
                        <div style={this.state.btnState?{background:'#CC0004'}:{background:'#BFBFBF'}}
                        onClick={this.account.bind(this) }
                        >去结算</div>
                    </div>
                </div>
            </div>
        )
    }
}
export default withRouter(
    connect((state)=>{
        return{
            state
        }
    })(CartComponents)
)